<template>
  <div class="md:flex">
    <Card size="small" :loading="loading" class="md:w-1/4 w-full !md:mt-0 !mt-4 !md:mr-4" :canExpan="false">
      <span slot="title">
        可开票金额
        <a-tooltip title="可开票金额 = 充值金额 - 开票金额（开票中+开票成功） - 退款金额（退款中+退款成功）">
        <Icon icon="ant-design:question-circle-outlined" style="margin-left: 5px;"/>
      </a-tooltip>
      </span>
      <div class="py-4 px-4 flex justify-between">
        <CountTo prefix="$" :startVal="0" :endVal="billStatistics.billCanAmount" :decimals="2" class="text-2xl" />
        <img src="./images/1.png" width="64">
      </div>
    </Card>
    <Card size="small" :loading="loading" title="充值金额" class="md:w-1/4 w-full !md:mt-0 !mt-4 !md:mr-4" :canExpan="false">
      <div class="py-4 px-4 flex justify-between">
        <CountTo prefix="$" :startVal="0" :endVal="billStatistics.rechargeTotalAmount" :decimals="2" class="text-2xl" />
        <img src="./images/3.png" width="64">
      </div>
    </Card>
    <Card size="small" :loading="loading" title="开票金额(开票中+开票成功)" class="md:w-1/4 w-full !md:mt-0 !mt-4 !md:mr-4" :canExpan="false">
      <div class="py-4 px-4 flex justify-between">
        <CountTo prefix="$" :startVal="0" :endVal="billStatistics.billAmount" :decimals="2" class="text-2xl" />
        <img src="./images/2.png" width="64">
      </div>
    </Card>
    <Card size="small" :loading="loading" title="退款金额(退款中+退款成功)" class="md:w-1/4 w-full !md:mt-0 !mt-4" :canExpan="false">
      <div class="py-4 px-4 flex justify-between">
        <CountTo prefix="$" :startVal="0" :endVal="billStatistics.refundAmount" :decimals="2" class="text-2xl" />
        <img src="./images/4.png" width="64">
      </div>
    </Card>
  </div>
</template>
<script lang="ts" setup>
  import { ref } from 'vue';
  import { CountTo } from "/@/components/CountTo/index";
  import { Card } from "ant-design-vue";
  import bill from "/@/router/routes/modules/bill";
  const loading = ref(false);

  const props = defineProps({
    billStatistics: { type: Object, default: ()=>{} },
  });
</script>
